<template>
  <div id="background">
    <el-card class="login-card">
      <h2 style="color: ghostwhite">警员登录</h2>
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-position="left"
        label-width="70px"
        class="login-form"
      >
        <el-form-item label="邮箱" prop="email" class="rlForm">
          <el-input v-model="loginForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="rlForm">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btnGroup" style="margin-top: 50px">
        <el-button
          type="primary"
          @click="submitForm('loginForm')"
          v-loading="loading"
          style="opacity: 0.8;"
          >登录</el-button
        >
        <el-button @click="resetForm('loginForm')" style="opacity: 0.8;">清空</el-button>
        <router-link to="/plcresetpsw">
          <el-button style="margin-left: 10px; opacity: 0.8;">忘记密码</el-button>
        </router-link>
        <router-link to="/plcregister">
          <el-button type="success" style="margin-left: 100px; opacity: 0.8;">注册</el-button>
        </router-link>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        email: "",
        password: "",
      },
      rules: {
        email: [
          { required: true, message: "请输入邮箱！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
        ],
      },
      loading: false, // 是否显示加载动画
    };
  },
  methods: {
    submitForm(formName) {
      // 验证表单中的账号密码是否有效，因为在上面rules中定义为了必填 required: true
      this.$refs[formName].validate((valid) => {
        // 点击登录后，让登录按钮开始转圈圈（展示加载动画）
        this.loading = true;
        // 如果经过校验，账号密码都不为空，则发送请求到后端登录接口
        if (valid) {
          // 使用 axios 将登录信息发送到后端
          this.axios({
            url: "https://apifoxmock.com/m1/4767131-4420546-default/api/login",               // 请求地址
            method: "post",                       // 请求方法
            headers: {                            // 请求头
              "Content-Type": "application/json",
            },
            params: {                             // 请求参数
              email: this.loginForm.email,
              password: this.loginForm.password,
            },
          }).then((res) => { // 当收到后端的响应时执行该括号内的代码，res 为响应信息，也就是后端返回的信息
            if (res.status === 200) {  // 登录成功响应信息
              // 从 sessionStorage 删除所有保存的数据
              sessionStorage.clear();
              // 将用户信息存储到sessionStorage中
              sessionStorage.setItem("userInfo", this.loginForm.email/*JSON.stringify(res.data.data)*/);
              // 跳转页面到首页
              this.$router.push('/plchome');
              // 显示后端响应的成功信息
              this.$message({
                message: '登录成功！',
                type: "success",
              });
            } else {  // 登录失败
              // 显示后端响应的失败信息
              this.$message({
                message: '登录失败！',
                type: "warning",
              });
            }
            // 不管响应成功还是失败，收到后端响应的消息后就不再让登录按钮显示加载动画了
            this.loading = false;
            console.log(res);
          });
        } else {  // 如果账号或密码有一个没填，就直接提示必填，不向后端请求
          console.log("提交错误");
          this.loading = false;
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
/* 设置登录面板居中 */
.login-card {
  margin: auto auto;
  border: 2px;
  width: 500px;
  height: 350px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.25) !important;
  background: rgba(45, 52, 54, 0.7);
}
/* 设置登录面板中的表单居中 */
.login-from {
  margin: auto auto;
}
</style>